<!DOCTYPE html>
<html>
  <head>
    <link href="static/css/style.css" rel="stylesheet">
    <script type="text/javascript" src="static/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="static/jquery.flot.js"></script>
    <script type="text/javascript" src="static/socket.io.js"></script>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="static/excanvas.js"></script><![endif]-->
    <script>
$(function() {

WEB_SOCKET_SWF_LOCATION = "/static/WebSocketMain.swf";
WEB_SOCKET_DEBUG = true;

// Socket.io specific code
var socket = io.connect('/cpu');

// Setup plot
var options = {
    series: { shadowSize: 0 }, // drawing is faster without shadows
    yaxis: { min: 0, max: 100 },
    xaxis: { show: false }
};

// For formatting the plot data
var enumerate = function(l) {
    var res = [];
    for (var i=0; i<l.length; ++i)
        res.push([i, l[i]])
    return res;
};

// Initial plot data is a bunch of 0's
var d1 = [];
for (var i=0; i<300; i++)
    d1.push(0);

// Create the inital graph
var plot = $.plot($('#graph'), [{data: enumerate(d1)}], options);

// Update the graph when we get new data from the server
socket.on('cpu_data', function(data) {
    d1 = d1.slice(1);
    d1.push(data.point);
    plot.setData([{data: enumerate(d1)}]);
    plot.draw();
});

});
  </script>
  </head>
<body>
  <h1>Live CPU graph</h1>
  <div id="graph" style="width: 600px; height: 300px;"></div>
  <div id="description">This graph shows the live CPU usage as reported
  by /proc/stat on Linux-like systems.</div>
</body>
</html>
